<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">员工</a>
        <a>
          <cite>列表</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <input class="layui-input" placeholder="创建开始日" name="startTime" id="start">
          <input class="layui-input" placeholder="创建截止日" name="endTime" id="end">
          <div class="layui-input-inline">
            <select name="gender" >
              <option value="0">选择性别</option>
              <option value="1">男</option>
              <option value="2">女</option>
              <option value="3">保密</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="status" >
              <option value="0">选择状态</option>
              <option value="1">正常</option>
              <option value="2">屏蔽</option>
              <option value="3">离职</option>
            </select>
          </div>
          <input type="text" name="keywords"  placeholder="请输入关键字" autocomplete="off" class="layui-input">
          <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger delte-all" data-type="deleteAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加员工','/empl/add/page')"><i class="layui-icon"></i>添加</button>

      </xblock>

      <table class="layui-table" id="data-table" lay-filter="data-table"></table>

    </div>
    <script>
      var tableIns;
      layui.use(['laydate','table','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        //监听搜索
        form.on('submit(search)', function(data){
          var param = data.field;
          // 处理开始时间和结束时间
          if (param.startTime.length !== 0){
            param.startTime = param.startTime+" 00:00:00";
          }
          if (param.endTime.length !== 0){
            param.endTime = param.endTime+" 23:59:59";
          }

          // 不影响原来的查询接口 =》 表格重载
          tableIns.reload({
            where: param
          })

          return false;
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });

        //第一个实例
        tableIns = table.render({
          elem: '#data-table'
          ,height: 500
          ,url: '/empl/list/data' //数据接口
          ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
          ,method: "post"
          ,page: true //开启分页
          ,cols: [
                  [ //表头
            {type:'checkbox', fixed: 'left'}
            ,{field: 'emplId', title: 'ID', sort: true}
            ,{field: 'emplName', title: '用户名'}
            ,{field: 'emplGender', title: '性别', align: 'center' , templet: function (d) {
                var text =  d.emplGender == 1 ? "男人" : d.emplGender == 2 ? "女人" : "保密";
                var clazz =  d.emplGender == 1 ? "" : d.emplGender == 2 ? " layui-btn-normal" : " layui-btn-warm";
                return '<span class="layui-btn layui-btn-sm '+clazz+'">'+text+'</span>';
            }}
            ,{field: 'deptId', title: '部门', templet:function (d) {
                return d.dept.deptName;
            }}
            ,{field: 'roles', title: '角色', templet: function (d) {
                var roleStr = "";
                $(d.roles).each(function () {
                    roleStr += this.roleName+",";
                });
                return roleStr.substr(0, roleStr.length-1);
             }}
            ,{field: 'emplStatus', title: '状态', align: 'center', templet: function (d) {
                var text =  d.emplStatus == 1 ? "正常" : d.emplStatus == 2 ? "屏蔽" : "离职";
                var clazz =  d.emplStatus == 1 ? "" : d.emplStatus == 2 ? " layui-btn-danger" : " layui-btn-warm";
                return '<span class="layui-btn layui-btn-sm '+clazz+'">'+text+'</span>';
            }}
            ,{field: 'lastLoginTime', title: '最后登录时间', sort: true}
            ,{field: 'createTime', title: '创建时间'}
            ,{field: 'updateTime', title: '更新时间', sort: true}
            ,{fixed: 'right', width:300, align:'center', toolbar: '#myToolBar'}
          ]
          ]
        });


        //工具条事件
        table.on('tool(data-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

          if(layEvent === 'normal'){ //正常状态
             changeStatus(data.emplId, 1)
          }else if(layEvent === 'disable'){ //屏蔽状态
            changeStatus(data.emplId, 2)
          } else if(layEvent === 'resign'){ //离职状态
            changeStatus(data.emplId, 3)
          }else if(layEvent === 'del'){ //删除
            layer.confirm('确认删除吗？', function(index){

              $.ajax({
                type: "post",// http请求方法
                url:"/empl/delete",// 后端的接口
                data: {emplId: data.emplId},// 传递到后端的数据
                dataType: "json", // 后端返回的数据类型
                success: function (res) {// 服务器成功响应之后对应的逻辑
                  layer.msg(res.msg);
                  // 重载表格
                  tableIns.reload();
                  layer.close(index);
                }
              });

            });
          } else if(layEvent === 'edit'){ //编辑
            x_admin_show('编辑员工','/empl/edit/page?id='+data.emplId)
          }
        });

        // 批量删除
        var $ = layui.$, active = {
          deleteAll: function(){ //获取选中数据
            var checkStatus = table.checkStatus('data-table')
                    ,data = checkStatus.data;
            // 判断是否勾选了数据
            if (data.length === 0){
              layer.msg("至少选择一条数据！");
              return;
            }
            // 获取选中的id数组
            var ids = [];
            $(data).each(function () {
              ids.push(this.emplId);
            });

            layer.confirm('确认删除数据吗？', function(index){

              $.ajax({
                type: "post",// http请求方法
                url:"/empl/deleteAll",// 后端的接口
                data: {ids: ids},// 传递到后端的数据
                dataType: "json", // 后端返回的数据类型
                success: function (res) {// 服务器成功响应之后对应的逻辑
                  layer.msg(res.msg);
                  // 重载表格
                  tableIns.reload();
                  layer.close(index);
                }
              });

            });
          }
        };

        $('.delte-all').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });

      });
      /*修改状态*/
      function changeStatus(emplId, emplStatus) {
        $.ajax({
          type: "post",// http请求方法
          url:"/empl/change/status",// 后端的接口
          data: {emplId: emplId, emplStatus: emplStatus},// 传递到后端的数据
          dataType: "json", // 后端返回的数据类型
          success: function (res) {// 服务器成功响应之后对应的逻辑
            // 重载表格
            tableIns.reload();
          }
        });

      }

    </script>


    <script type="text/html" id="myToolBar">
      <a class="layui-btn layui-btn-xs" lay-event="normal">正常</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable">屏蔽</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="resign">离职</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

  </body>

</html>
